<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">

    <title>{{ title }}</title>
    <link rel="stylesheet" href="/static/css/bootstrap.css">
    <link rel="stylesheet" href="/static/css/formValidation.css"/>

    <script src="/static/js/jquery-1.10.2.min.js"></script>
    <script src="/static/js/formValidation.min.js"></script>
    <script src="/static/js/validater/bootstrap.min.js"></script>
    <script src="/static/js/bootstrap.js"></script>
    <script type="text/javascript" src="/static/js/language/zh_CN.js"></script>
    <script>
        function preLook() {
            var svg = $("#svg").val();
            var color = $("#color").val();
            var svgData = svg.replace(/\sclass="[\w\d]*"/gi,"").replace(/\sfill="[#\w\d]*"/gi,"");
            //var svgData = svg.replace(/\swidth="[\w\d]*"/gi,"").replace(/\sheight="[\w\d]*"/gi,"").replace(/\sclass="[\w\d]*"/gi,"").replace(/\sfill="[#\w\d]*"/gi,"");
            //fill="#f3ca7e"
            $("#yulan").empty();
            $("#yulan").append(svgData);
            $("svg").attr("fill",color);
        }

        $(document).ready(function() {
            $('#defaultForm').formValidation({
                message: 'This value is not valid',
                icon: {
                    valid: 'glyphicon glyphicon-ok',
                    invalid: 'glyphicon glyphicon-remove',
                    validating: 'glyphicon glyphicon-refresh'
                },
                fields: {
                    cnName: {
                        message: 'The username is not valid',
                        validators: {
                            notEmpty: {
                                message: '中文名不能为空'
                            }
                        }
                    },
                    enName: {
                        validators: {
                            notEmpty: {
                                message: '英文名不能为空'
                            },
                            regexp: {
                                regexp: /^[a-z-\.]+$/,
                                message: "英文名只能包含小写字母与'-'"
                            }
                        }
                    },
                    svg: {
                        validators: {
                            notEmpty: {
                                message: 'svg不能为空'
                            }
                        }
                    },
                    color: {
                        validators: {
                            notEmpty: {
                                message: '颜色不能为空'
                            }
                        }
                    },
                }
            });
        });
    </script>
</head>

<body>
<div id="important" style="color:#cdbfe3; background-color:#6f5499; padding:30px 0; margin:-20px 0 20px 0;">
    <div class="container">
        <h4 style="color:#fff; font-size:30px">ECMP上传图标</h4>
    </div>
</div>
<div class="container">
    <div class="row">
        <div class="col-md-6">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h3 class="panel-title"><span class="glyphicon"></span>上传</h3>
                </div>
                <div class="panel-body" style="height:520px;">
                    <form id="defaultForm" action="/doupload" method="post">
                        <div class="form-group">
                            <label>分组</label>
                            <select name="groupName" class="form-control">
                                <option>常用图标</option>
                                <option>报销图标</option>
                            </select>
                        </div>
                        <div class="form-group">
                            <label>中文名</label><p class="help-block" style="display: inline">(example：编辑)</p>
                            <input type="text" name="cnName" class="form-control" placeholder="编辑">
                        </div>
                        <div class="form-group">
                            <label>英文名</label><p class="help-block" style="display: inline">(example：edit)</p>
                            <input type="text" name="enName" class="form-control" placeholder="edit">
                        </div>
                        <div class="form-group">
                            <label>svg</label>
                            <textarea name="svg" class="form-control" rows="3" id="svg"></textarea>
                        </div>
                        <div class="form-group">
                            <label>颜色</label>
                            <input type="color" name="color" class="form-control" placeholder="admin" value="#69aed2" id="color">
                        </div>
                        <div class="form-group">
                            <button type="button" onclick="preLook()"  class="btn btn-primary">预览</button>
                            <button type="submit"  name="submit1" class="btn btn-primary">上传</button>
                        </div>
                    </form>
                </div>

            </div>
        </div>
        <div class="col-md-6">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h3 class="panel-title"><span class="glyphicon "></span> 预览</h3>
                </div>
                <div class="panel-body" style="height:520px;">
                    <div id="yulan" width="100%" height="100%" >

                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</body>

</html>





